<template>
  <div id='tmpl'>
    <!--评论组件-->
    <!--1.0 实现提交评论数据到服务器的静态结构-->
    <div id="postcomment">
      <h3>提交评论</h3>
      <p class="p"></p>
      <textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea>
      <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
    </div>
    <!--2.0 实现获取评论数据列表-->
    <div id="list">
      <h3>评论列表</h3>
      <p class="p"></p>
      <div v-for="(item,index) in list">
        <div class="title">
          <span>第{{index + 1}}楼:</span>
          <span>用户：{{item.user_name}}</span>
          <span>发表时间：{{item.add_time | timedmf('YYYY-MM-DD HH:mm:ss')}}</span>
        </div>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-text="item.content"></li>
        </ul>
      </div>
    </div>
    <!--3.0 实现获取更多按钮-->
    <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      id: 0,
      postcontent: '',
      list: [],
      pageindex: 1,
      userComment: {}
    };
  },
  created() {
    this.id = this.$route.params.getid;
    this.getList();
  },
  methods: {
    getList() { //获取评论列表,页面加载
      this.pageindex = this.pageindex || 1;
      var url = this.$common.apidomain + '/api/getcomments/' + this.id + '?pageindex=' + this.pageindex;
      this.$http.get(url).then(function (res) {
        if (res.body.status !== 0) {
          Toast(res.body.message);
          return;
        }
        // this.list = res.body.message;
        this.list = this.list.concat(res.body.message);
        console.log(this.list);
      })
    },
    postcomment() { //把用户评论的数据提交到后台并在评论列表最前端展示
      if (this.postcontent.trim().length === 0) {
        Toast('您输入的评论不能为空!');
        return;
      }
      this.userComment = {
        user_name: "匿名用户",
        add_time: new Date(),
        content: this.postcontent
      }
      var url = this.$common.apidomain + '/api/postcomment/' + this.id;
      this.$http.post(url, { content: this.postcontent }, { emulateJSON: true }).then(function (res) {
        if (res.body.status !== 0) {
          return;
        }
        Toast(res.body.message);
        this.list.unshift(this.userComment);
        this.getList();
        this.postcontent = '';
      })
    },
    getmore() { //获取到更多的评论
      this.pageindex++;
      this.getList();
    }
  }
}
</script>
<style lang="css" scoped>
/* 1.0 实现提交评论样式 */

#postcomment {
  padding: 5px;
}

.p {
  height: 1px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}






/*2.0 评论列表的样式*/

#list {
  padding: 5px;
}

.title {
  padding: 5px;
  color: #6d6d72;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>